<template>
  <section class="content" id="content">
    <!-- 检索条件 -->
    <el-form id="search" :inline="true">
      <el-form-item label="企业名称">
        <el-input
          v-model="searchForm.enterpriseName"
          clearable
          placeholder="请输入车辆号码"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-input
          v-model="searchForm.projectName"
          clearable
          placeholder="请输入车辆号码"
        ></el-input>
      </el-form-item>

      <el-form-item label="行业类型：">
        <el-select
          v-model="searchForm.projectIndustryTypeName"
          clearable
          placeholder="请选择行业类型"
        >
          <el-option
            v-for="item in commonConst.industryTypeNameList"
            :key="item.key"
            :label="item.value"
            :value="item.value"
            placeholder="请选择行业类型"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="项目类别：">
        <el-select
          v-model="searchForm.projectType"
          clearable
          placeholder="请选择项目类别"
        >
          <el-option
            v-for="item in commonConst.projectTypeList"
            :key="item.key"
            :label="item.value"
            :value="item.value"
            placeholder="请选择项目类型"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="审核状态：">
        <el-select
          v-model="searchForm.auditStatus"
          clearable
          placeholder="请选择审核状态"
        >
          <el-option
            v-for="item in commonConst.auditStatusList"
            :key="item.key"
            :label="item.value"
            :value="item.value"
            placeholder="请选择审核状态"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="项目负责人：">
        <el-input
          v-model="searchForm.projectManagerName"
          clearable
          placeholder="请输入项目负责人"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话：">
        <el-input
          v-model="searchForm.projectManagerPhone"
          clearable
          placeholder="请输入负责人电话"
        ></el-input>
      </el-form-item>
      <el-form-item label="审核通过时间：">
        <el-input
          v-model="searchForm.projectCheckTime"
          clearable
          placeholder="请输入审核通过时间"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 功能按钮 -->
    <div class="handler" id="tools">
      <el-button type="primary" @click="searchThreePhase">查询</el-button>
      <el-button type="danger" @click="handleReset">重置</el-button>
      <!--      <uploadFile @uploadFile="getUploadFileResult" :api="resources.default.uploadFile" />-->
      <el-button type="warning" size="small" @click="onExport">导出</el-button>
    </div>
    <!-- 数据列表 -->
    <div id="table">
      <el-table
        size="default"
        :data="tableData"
        v-loading="loading"
        :border="true"
        :header-cell-style="{ background: '#e1eaf6 ', color: '#333333' }"
        :stripe="true"
        @selection-change="selectionChange"
        highlight-current-row
      >
        <el-table-column prop="id" type="selection" width="60" />
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column label="企业名称" show-overflow-tooltip min-width="150">
          <template #default="scope">
            <el-link @click="handleInfo(scope.row.id)" type="primary">{{
              scope.row.enterpriseName
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="项目名称" show-overflow-tooltip min-width="150">
          <template #default="scope">
            <el-link @click="handleInfo(scope.row)" type="primary">{{
              scope.row.projectName
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="projectIndustryTypeName"
          label="行业类别"
          show-overflow-tooltip
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="projectType"
          label="项目类型"
          show-overflow-tooltip
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="projectManagerName"
          label="项目负责人"
          show-overflow-tooltip
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="projectManagerPhone"
          label="联系电话"
          show-overflow-tooltip
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="projectStatus"
          label="项目状态"
          show-overflow-tooltip
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="checkStatus"
          label="审核状态"
          show-overflow-tooltip
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="createUser"
          label="提交人"
          show-overflow-tooltip
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="updateUser"
          label="修改人"
          show-overflow-tooltip
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="项目提交时间"
          show-overflow-tooltip
          min-width="160"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          label="项目最新修改时间"
          show-overflow-tooltip
          min-width="160"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          label="项目审核通过时间"
          show-overflow-tooltip
          min-width="160"
        ></el-table-column>
      </el-table>
    </div>
    <div id="pagination">
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :pageNum="pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>

    <el-dialog v-model="dialog.visible" width="85%" top="10vh" title="项目详情">
      <detail-info> </detail-info>
    </el-dialog>
  </section>
</template>
<script setup lang="ts">
/**
 * 方法、变量及组件的引入
 */
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { store } from "@ice/stark-data";
import commonConst from "@/config/const";
import uploadFile from "@/components/upload/File.vue";
import DetailInfo from "./DetailInfo.vue";
/**
 * 全局方法引入
 */
const global = getCurrentInstance().appContext.config.globalProperties;
// 检索form字段声明
const searchForm = reactive({
  enterpriseName: "",
  projectName: "",
  projectIndustryTypeName: "",
  projectType: "",
  auditStatus: "",
  projectManagerName: "",
  projectManagerPhone: "",
  projectCheckTime: "",
});

// table 相关字段
const tableData = ref([]);
const loading = ref(false);
// 分页相关字段
const pageNum = ref(1);
const total = ref(0);
const pageSize = ref(10);

onMounted(() => {
  searchThreePhase();
});

// 查询功能
const searchThreePhase = () => {
  loading.value = true;
  let data = Object.assign({}, searchForm, {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  });
  let obj = global.$delUndefined(data);
  global.$api.getThreePhaseListPage(obj).then(({ data }) => {
    loading.value = false;
    if (data.status === "OK") {
      tableData.value = data.data.list;
      total.value = data.data.total;
    }
  });
};
// 分页
const handleCurrentChange = (val) => {
  pageNum.value = val;
  // 调用查询方法
  searchThreePhase();
};
const handleSizeChange = (val) => {
  pageSize.value = val;
  searchThreePhase();
};

// 多选操作 Id集合
const idList = ref([]);
const selectionChange = (selection) => {
  idList.value = selection.map((item) => item.id);
};
// 删除功能
const handleRemove = () => {
  if (idList.value.length === 0) {
    ElMessage({
      type: "info",
      message: "请选择至少一个车辆信息",
    });
  } else {
    ElMessageBox.confirm(
      `是否删除${idList.value.length}个车辆的详细信息？删除后不可恢复!`,
      "确认信息",
      {
        type: "warning",
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "取消",
      }
    )
      .then(() => {
        global.$api
          .delVehicle({
            ids: idList.value,
          })
          .then(({ data }) => {
            searchVehicle();
            ElMessage({
              type: "success",
              message: "您已经删除了车辆信息",
            });
          });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "您已经取消了删除操作",
        });
      });
  }
};

// 新增/编辑/详情 相关字段

const dialog = ref({
  visible: false,
  innerAttrs: {},
  events: {
    open: () => {
      console.log("dialog open.....");
      // console.log(toValue(tableData.value));
    },
    close: () => {
      console.log("dialog close.....");
    },
  },
});

const dialogTitle = ref("");
const dialogVisible = ref(false);
// status 值为add/edit/info,用来标识子组件的状态
const send = reactive({
  info: {},
  status: "",
});
// 打开新增画面
const handleAdd = () => {
  dialogVisible.value = true;
  dialogTitle.value = "车辆信息新增";
  send.status = "add";
  send.info = {};
};

// 打开编辑画面
const handleEdit = (row) => {
  dialogVisible.value = true;
  dialogTitle.value = "车辆信息变更";
  send.status = "edit";
  global.$api.getVehicle({ id }).then(({ data }) => {
    if (data.status === "OK") {
      send.info = data.data;
    }
  });
};

// 打开详情画面
const handleInfo = (row) => {
  dialog.value.visible = true;
  //dialogTitle.value = "信息详细";
};
// dialog 关闭
const handleClose = () => {
  dialogVisible.value = false;
  send.info = {};
  send.status = "";
  searchVehicle();
};
// 导入
const getUploadFileResult = (val) => {
  if (val) {
    ElMessage.success("文件导入成功!");

    // table 列表刷新
  } else {
    ElMessage.error("文件导入失败!");
  }
};
// 导出
const onExport = () => {
  let tHeader = [
    { key: "name", name: "姓名" },
    { key: "sex", name: "性别" },
    { key: "age", name: "年龄" },
  ];
  // 测试数据
  let tableList = [
    { name: "aaa", sex: "1", age: 16 },
    { name: "bbb", sex: "2", age: 18 },
  ];
  let exportData = tableList;
  // 将后台状态码转变为文字显示
  for (let i in exportData) {
    if (exportData[i].sex === "1") {
      exportData[i].sex = "男";
    } else if (exportData[i].sex === "2") {
      exportData[i].sex = "女";
    } else {
      exportData[i].sex = "--";
    }
  }
  let list = {
    fileName: "xxx列表", //文件名
    tHeader: tHeader, //生成Excel表格的头部标题栏
    excelData: exportData, //需要导出Excel的数据集合
  };
  global.$exportExcel.exportExcel(list);
};
</script>
